<template>
  <div style="width: 100%; height: 100%">
    <!-- <div class="arrowdiv">
      <px-button style="float: left" :icon="ArrowLeft" plain text :disabled="!canPrev" @click="handelPrev" />
      <px-button style="float: left" :icon="ArrowRight" plain text :disabled="!canNext" @click="handelNext" />
    </div> -->
    <!-- <px-carousel
      v-if="chartsList.length > 0"
      ref="carouselContainer"
      :loop="true"
      :autoplay="autoplay"
      arrow="never"
      style="height: 100%"
      :interval="5000"
      @change="handleCarouse"
    >
      <px-carousel-item v-for="(list, index) in chartsList" :key="index">
        <div v-for="(chartsList, index1) in list" :key="index1" class="chart-item">
          <chartsUpw
            style="width: 100%; height: 100%"
            :chartsList="chartsList"
            :xaxis="xaxis"
            :color="'#35CECB'"
            :width="'100%'"
            :height="'100%'"
            :type="type"
          />
        </div>
        <template #arrow-left>
          <px-icon><ArrowLeft /></px-icon>
        </template>
      </px-carousel-item>
      <px-carousel-item>
        <div class="bg-purple">帮平吕</div>
      </px-carousel-item>
    </px-carousel> -->
    <div v-if="chartsList.length > 0" style="width: 100%; height: 100%">
      <div v-for="(list, index) in chartsList" :key="index" class="model_chart_con">
        <div class="chart-item">
          <chartsPCW
            style="width: 100%; height: 100%"
            :chartsList="chartsList1"
            :xaxis="xaxis"
            :color="'#3B82F6'"
            :width="'100%'"
            :height="'100%'"
            :type="type"
          />
        </div>
        <div v-for="(chartsList, index1) in list" :key="index1" class="chart-item">
          <chartsUpw
            style="width: 100%; height: 100%"
            :chartsList="chartsList"
            :xaxis="xaxis"
            :color="'#3B82F6'"
            :width="'100%'"
            :height="'100%'"
            :type="type"
          />
        </div>
      </div>
    </div>
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from "vue";
import { reactive, onMounted, ref } from "vue";
import chartsPCW from "./chartsPCW.vue";
import chartsUpw from "./chartsUpw.vue";
// const carouselContainer = ref(Math.random().toString(36).slice(2, 10));
// import { ArrowLeft, ArrowRight } from "@px-ui/icons-vue";
import { queryChildByTypeCodeAndItemValue } from "@/api/waterClass";
import { queryChartForHour } from "@/api/waterKanban";
onMounted(() => {
  byEvents();
});
const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  autoplay: {
    type: Boolean,
    default: false
  }
});
const state = reactive({
  dataList: [],
  chartsList: [],
  chartsList1: [],
  xaxis: []
});
const { dataList, chartsList1, chartsList, xaxis } = toRefs(state);
// const handelPrev = () => {
//   carouselContainer.value.prev();
// };
// const handelNext = () => {
//   carouselContainer.value.next();
// };
// const canPrev = ref(false);
// const canNext = ref(true);
// const handleCarouse = index => {
//   canPrev.value = index > 0;
//   canNext.value = index < chartsList.value.length - 1;
// };
const byEvents = async () => {
  const arr1 = ["PCWPVZB001", "PCWPVZB001A", "PCWPVZB001B"]; // 供水压力，回水压力，供回压差
  const arr2 = ["PCWPVZB002", "PCWTOTALFLOAT"]; // 供水温度，PCW供水总流量
  const response1: any = await queryChildByTypeCodeAndItemValue({
    value: "PCWPVZB",
    typeCode: "MCTS"
  });
  const dataList1: any = response1.filter(el => arr1.includes(el.itemValue)) || [];
  const nameList1: any = dataList1.map(e => JSON.parse(e.itemDesc.replace(/[\r|\n|\t]/g, ""))?.name || "");
  const titleList1: any = Array.from(new Set(nameList1));
  const dataList2: any = response1.filter(el => arr2.includes(el.itemValue)) || [];
  const nameList2: any = dataList2.map(e => JSON.parse(e.itemDesc.replace(/[\r|\n|\t]/g, ""))?.name || "");
  const titleList2: any = Array.from(new Set(nameList2));
  queryChartForHour({ dictTypeCode: "MCTS", dictKey: "PCWPVZB" }).then((response: any) => {
    chartsList1.value = response.panelList && response.panelList.length ? response.panelList.filter(el => titleList1.includes(el.title)) : [];
    dataList.value = response.panelList && response.panelList.length ? response.panelList.filter(el => titleList2.includes(el.title)) : [];
    xaxis.value = response.xaxis && response.xaxis.length ? response.xaxis.map(e => e.split(" ")[1]) : [];
    let newDataList = [];
    let current = 0;
    if (dataList.value && dataList.value.length > 0) {
      for (let i = 0; i <= dataList.value.length - 1; i++) {
        if (i % 4 !== 0 || i === 0) {
          if (!newDataList[current]) {
            newDataList.push([dataList.value[i]]);
          } else {
            newDataList[current].push(dataList.value[i]);
          }
        } else {
          current++;
          newDataList.push([dataList.value[i]]);
        }
      }
    }
    chartsList.value = [...newDataList];
    // if (chartsList.value.length > 1) {
    //   canNext.value = true;
    // }
  });
};
</script>
<style scoped lang="scss">
.arrowdiv {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 99999;
  width: 110px;
  height: 20px;

  i {
    cursor: pointer;
  }
}

.model_chart_con {
  display: flex;
  flex-flow: row nowrap;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .chart-item {
    width: 50%;
    // min-width: 300px;
    height: 100%;
  }
}

:deep(.px-carousel__container) {
  position: relative;
  height: 100%;
}

:deep(.px-carousel__indicators--horizontal) {
  bottom: -15px;
}
</style>
